/* 清楚浏览器默认样式 */
* {
  margin: 0;
  padding: 0;
}

/*公共样式*/
@mixin style {
  width: 248px;
  height: 80px;
  color: #fff;
  overflow: hidden;
  padding: 26px 34px 16px;
  border-radius: 18px;
  position: relative;
  display: inline-block;
}

@mixin text {
  font-size: 22px;
  font-weight: bold;
}

@mixin spanEle {
  display: block;
  width: 47px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  color: #fec17e;
  margin-top: 11px;
}

@mixin imgEle {
  width: 125px;
  height: 125px;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* 页头区域 */
#baseHead {
  width: 100%;
  height: 160px;
  overflow: hidden;
  background-color: #fff;
  color: #877a73;
  font-size: 14px;
  position: relative;

  .wrapper {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;

    /* 右边logo区域 */
    .logo {
      height: 75px;
      margin: 50px 0 0 20px;
      float: left;
      overflow: hidden;

      a {
        color: #333;

        img {
          width: 75px;
          height: 75px;
          float: left;
        }
      }

      .right {
        color: #43200c;
        margin: 8px 0 0 15px;
        text-align: center;
        float: left;

        h3 {
          font-size: 28px;
          font-weight: bold;
          line-height: 40px;
        }

        span {
          font-size: 12px;
          line-height: 17px;
          transform: scale(.8);
          display: inline-block;
        }
      }
    }

    /* 中间搜索区域 */
    .search {
      width: 532px;
      height: 48px;
      display: flex;
      align-items: center;
      border-radius: 24px;
      border: 2px solid #000;
      background-color: #fff;
      margin: 50px 2px 50px; //50px 0 0 50px
      position: relative;
      float: left;

      span {
        width: 60px;
        height: 48px;
        background: url(../static/image/panda-Searchbutton.png);
        background-size: 30px 30px;
        background-repeat: no-repeat;
        background-position: 14px 8px;
      }

      input {
        width: 355px;
        height: 44px;
        outline: none;
        border: 0;
        font-size: 16px;
      }

      p {
        width: 130px;
        height: 44px;
        background-color: #ecda37;
        border-radius: 22px;
        line-height: 44px;
        margin-right: 2px;
        text-align: center;
      }
    }

    /* 右边品牌保证区域 */
    .advantage {
      font-size: 10px;
      margin: 43px 180px 0 0; // 43px 86px 0 0
      float: right;

      ul {
        overflow: visible;
        list-style-type: none;

        li {
          float: left;
          position: relative;
          margin-right: 25px;
          width: 44px;
          height: 60px;
          text-align: center;
        }

        img {
          display: inline-block;
          width: 40px;
        }

        span {
          position: absolute;
          bottom: 0;
          left: 50%;
          font-size: 12px;
          white-space: nowrap;
          transform: translateX(-50%);
        }
      }
    }

    /* 用户信息区域 */
    #userinfor {
      font-size: 10px;
      margin: -60px 40px 0 0;
      float: right;
      height: 50px;

      img {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin-right: 10px;
      }
    }
  }
}

/* 导航栏 */
#nav {
  width: 100%;
  height: 46px;
  color: #fff;
  margin: 0 auto;
  background-color: #43240c;

  ul {
    width: 1200px;
    height: 46px;
    margin: 0 auto;
    display: flex;
  }

  li {
    width: 220px;
    text-align: center;
    line-height: 46px;

    &:hover {
      color: #43240c;
      background-color: #fee44e;
    }
  }
}


/*商品详情*/
#product-detail {
  margin: 0 auto;
  width: 1200px;
  min-width: 750px;
  background-color: #f6f6f6;

  .infoshop {
    width: 1200px;

    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .shoppinginfoleft {
      width: 920px;
      background-color: #fff;
      display: flex;
      justify-content: space-around;
      position: relative;

      .glass {
        width: 300px;
        height: 300px;
        display: flex;
        flex-direction: column;

        .showphoto {
          width: 300px;
          height: 300px;
          position: relative;

          img {
            width: 300px;
            height: 300px;
          }

          .bigImg {
            width: 100px;
            height: 100px;
            background-color: rgba(255, 230, 89, 0.596);
            z-index: 99;
            pointer-events: none;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
          }
        }

        .imglist {
          width: 300px;
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            width: 50px;
            height: 50px;
          }
        }
      }

      #bigphoto {
        width: 400px;
        height: 400px;
        z-index: 99;
        overflow: hidden;
        background-color: rgba(177, 49, 49, 0.705);
        position: absolute;
        top: 0px;
        right: 130px;
        display: none;

        img {
          width: 1200px;
          height: 1200px;
        }
      }

      .shoptextinfo {
        width: 500px;
        height: 360px;
        display: flex;
        flex-direction: column;
        justify-content: start;

        .infotitle {
          margin-top: 20px;
          margin-bottom: 10px;

          display: flex;
          justify-content: start;

          img {
            width: 24px;
            height: 24px;
            margin-right: 5px;
            margin-top: 8px;
          }

          .baoyou {
            height: 24px;
            width: 100px;
            font-size: 14px;
            color: rgb(139, 127, 120);
            text-align: center;
            line-height: 24px;
            margin-top: 8px;
            border: 1px solid rgb(139, 127, 120);
          }

          .jieshao {
            font-size: 24px;
            line-height: 40px;
          }
        }

        .youhui {
          width: 480px;
          height: 80px;
          padding-left: 20px;
          background-color: rgba(211, 211, 211, 0.2);


          .oprice {
            font-size: 16px;
            color: rgb(92, 92, 92);
            text-decoration: line-through;
            margin-top: 10px;
          }

          div {
            width: 480px;
            position: relative;
            margin-top: 10px;
            display: flex;
            justify-content: start;
            align-items: flex-end;

            p:nth-child(1) {
              font-size: 18px;
              color: red;

            }

            p:nth-child(2) {
              font-size: 18px;
              color: red;
              margin-left: 10px;


              span:first-child {
                font-size: 32px;
              }

              span:last-child {
                font-size: 12px;
                display: inline-block;
                padding: 2px 5px;
                border: 1px solid red;
                margin-left: 10px;
              }
            }

            p:nth-child(3) {
              font-size: 14px;
              color: rgb(92, 92, 92);
              position: absolute;
              bottom: 5px;
              right: 20px;

            }
          }
        }

        .youhuidate {
          width: 500px;
          font-size: 14px;
          text-align: end;
          color: red;
          margin-top: 16px;
        }

        .joincart {
          width: 200px;
          height: 60px;
          font-size: 20px;
          text-align: center;
          line-height: 60px;
          color: #fff;
          background-color: red;
          border-radius: 5px;
          position: absolute;
          right: 25px;
          bottom: 20px;
          cursor: pointer;
        }
      }
    }

    .shoppinginforight {
      width: 260px;
      height: 360px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;

      .shopxinxi {
        width: 260px;
        height: 60px;
        font-size: 16px;
        text-align: center;
        line-height: 60px;
        background: linear-gradient(to bottom, rgb(254, 228, 78), rgb(255, 253, 245))
      }

      img {
        width: 150px;
        height: 150px;
        margin-top: 20px;
      }

      .shopname {
        font-size: 18px;
        margin-top: 16px;
      }

      .pingfenleibie {
        width: 200px;
        margin: 0 auto;
        margin-top: 20px;
        color: rgb(194, 169, 165);
        display: flex;
        justify-content: space-around;
      }

      .pingfen {
        width: 200px;
        color: rgb(251, 149, 71);
        margin: 0 auto;
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
      }
    }
  }

  .infobottom {
    width: 1200px;
    margin-top: 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

}

/*购物车*/
#goCart {
  cursor: pointer;
  position: fixed;
  right: 50px;
  bottom: 300px;

  img {
    width: 70px;
    height: 70px;
    border-radius: 26px;
  }
}

/*回到顶部*/
#back-top {
  cursor: pointer;
  position: fixed;
  right: 50px;
  bottom: 230px;

  img {
    width: 60px;
    height: 60px;
  }
}

/*页脚*/
#footer {
  margin: 81px auto 0;

  .base-footer {
    width: 100%;
    height: 240px;
    background-color: #000;
    opacity: 0.7;
    color: #fff;
    position: relative;
    bottom: 0;
    font-family: PingFang-SC-Medium;
    margin-top: 81px;

    .footer-container {
      width: 1200px;
      height: 112px;
      margin: 0 auto;

      img {
        width: 112px;
        height: 112px;
        margin: 37px 19px 0 40px;
        float: left;
        border-radius: 20px;
      }

      .footer-content {
        display: inline-block;
        text-align: center;
        margin-top: 45px;
        margin-right: 444px;

        h1 {
          font-size: 36px;
          font-family: PingFangSC-Semibold;
          font-weight: 600
        }

        p {
          font-size: 18px;
          font-weight: 500;
          line-height: 25px;
        }
      }

      .about-us {
        margin-top: -56px;

        p {
          font-size: 20px;
          margin-left: 502px;

          span {
            margin: 0 8px;
          }

          a {
            color: #fff;
            text-decoration: none;
          }
        }
      }

      .footer-buttom {
        text-align: center;
        margin-top: 88px;
        position: relative;

        .police-icon {
          width: 22px;
          height: 22px;
          margin-top: 2px;
          vertical-align: -5px;
          position: absolute;
          margin-left: -28px;
        }

        p {
          font-size: 18px;
          line-height: 25px;
          display: inline-block;

          a {
            color: rgb(255, 255, 255)
          }
        }
      }
    }
  }
}

/*安全认证lofo*/
#security {
  padding-bottom: 50px;
  display: block;
  text-align: center;
}